1
00:00:00,480 --> 00:00:01,010
Hello.

2
00:00:01,020 --> 00:00:06,600
In this lecture we are going to implement some mouse control.

3
00:00:06,600 --> 00:00:11,760
We've already implemented keyboard's controls so we're going to implement mouse controls so that it

4
00:00:11,760 --> 00:00:21,030
is easier for the mouse to walk with the key board control so you can easily control the paddle with

5
00:00:21,030 --> 00:00:23,100
the movement of the mouse.

6
00:00:23,100 --> 00:00:30,700
So let's begin to do that to listen out for the movement on the mouse.

7
00:00:30,930 --> 00:00:34,570
We need to have a event listener.

8
00:00:34,650 --> 00:00:43,140
So I'm going to add an event listener along saw a mouse move handler that will handle the movement of

9
00:00:43,140 --> 00:00:47,550
the mouse when the event listener triggers it off.

10
00:00:47,550 --> 00:00:48,820
So less to that.

11
00:00:48,930 --> 00:00:57,870
So we've already got in in our script you've already caught too many listeners here for the key down

12
00:00:57,870 --> 00:01:04,980
and key up so we just need to add another one here for the mouse movement to listen up for the mouse

13
00:01:05,010 --> 00:01:08,000
movement to save time.

14
00:01:08,010 --> 00:01:12,950
I have already included the line here online fifty two.

15
00:01:13,260 --> 00:01:21,290
So as a documented AD event listener and in the parent this is home got the mouse moves with an A now

16
00:01:21,310 --> 00:01:28,410
fully meant mouse Wolf and this mouse move handler will handle the event.

17
00:01:28,410 --> 00:01:31,630
So the values set to force goes when the mouse.

18
00:01:31,650 --> 00:01:42,270
There's no more men than a mouse to force the next thing we need to do is find a way to kind of like

19
00:01:42,780 --> 00:01:50,490
call the movement of the paddle to the movement of the mouse so you can control the paddle with the

20
00:01:50,490 --> 00:01:52,380
mouse.

21
00:01:52,830 --> 00:02:03,330
To do that we can create a function called moose mouse move handler and will use that tool and call

22
00:02:03,660 --> 00:02:07,760
the pad of movement to the mouse movement.

23
00:02:08,490 --> 00:02:09,530
So I create them.

24
00:02:09,540 --> 00:02:21,450
The function here from the line 74 to 81 this function called mouse move handler will be responsible

25
00:02:21,450 --> 00:02:28,580
for anchoring the pad and movement to the movement of the mouse.

26
00:02:28,590 --> 00:02:40,160
So what this means is that you can update the position of the paddle based on the poynton or denied

27
00:02:40,170 --> 00:02:45,560
them in base on which way the mouse pointer moves.

28
00:02:46,020 --> 00:02:57,150
All right so the the way this function here works is that it will work out a reality of x value which

29
00:02:57,150 --> 00:03:07,420
will be equal to the horizontal mouse position in the viewpoint that is the egolf Client X..

30
00:03:07,590 --> 00:03:08,380
All right.

31
00:03:08,550 --> 00:03:18,310
Mine was the distance between the left edge of the compass and the left edge of the viewport or would

32
00:03:18,320 --> 00:03:22,720
become covers offset to the left.

33
00:03:23,100 --> 00:03:29,370
Right so effectively what this means is that this will be opposed to the distance between the compass

34
00:03:29,460 --> 00:03:35,020
on the left side of the edge and the mouse pointer.

35
00:03:35,250 --> 00:03:44,340
So if the relative point out position is greater than zero and below a lower than the compass with the

36
00:03:44,340 --> 00:03:53,970
point that is within the canvass boundaries and the panel x position will be called on the left edge

37
00:03:54,030 --> 00:03:55,190
of the panel.

38
00:03:55,500 --> 00:04:02,390
Okay and then this will be set to be relative to the x value.

39
00:04:02,640 --> 00:04:13,770
My loss half the width of the panel so that movement will openly be relative to the middle of the panel

40
00:04:14,380 --> 00:04:15,610
right.

41
00:04:15,720 --> 00:04:23,150
So what this will mean effectively is that the panel will now follow the position of the mouse cursor

42
00:04:23,160 --> 00:04:27,460
so anywhere the go move the cursor the paddle will morph.

43
00:04:27,660 --> 00:04:35,720
This will make it a lot easier to use the pad to control the movement of the ball.

44
00:04:35,720 --> 00:04:40,600
All right so I'll just save my work and then I can run it.

45
00:04:40,650 --> 00:04:43,480
You can see what the code look facts.

46
00:04:43,690 --> 00:04:47,390
Alright so this is what.

47
00:04:48,990 --> 00:04:51,990
Okay so you can see now the mouse.

48
00:04:52,070 --> 00:04:57,030
See Is he out to morph a lot easier to the mouse pointer.

49
00:04:57,090 --> 00:04:59,620
Is relative.

50
00:05:00,020 --> 00:05:02,310
To see that it makes it a lot easier.

51
00:05:02,370 --> 00:05:04,170
Holiday and moving them with my.

52
00:05:04,190 --> 00:05:09,400
You can see that a lot easier than just using the arrows on the keyboard.

53
00:05:09,860 --> 00:05:12,690
All right see that a lot easier.

54
00:05:12,700 --> 00:05:15,660
And that's me using my mouse.

55
00:05:15,890 --> 00:05:22,290
So with the mouse now is effective in controlling the paddle.

56
00:05:22,370 --> 00:05:23,920
Super.

57
00:05:24,230 --> 00:05:24,920
Excellent.

58
00:05:24,930 --> 00:05:26,580
So that's it.

59
00:05:26,660 --> 00:05:29,680
We are done with this game.

60
00:05:29,900 --> 00:05:44,380
So we have successfully completed the development of a two week game using hastier male 5 and pure javascript.

61
00:05:44,780 --> 00:05:46,070
Thank you so much.

62
00:05:46,070 --> 00:05:53,000
Please let me know if you have any questions on any of the sections in this course.

63
00:05:53,170 --> 00:05:55,550
I'd be more than happy to help.

64
00:05:55,700 --> 00:05:58,750
Try and practice as much as possible.

65
00:05:58,970 --> 00:06:06,580
Try and change someone the values we have used and I will recommend you change live to values at a time

66
00:06:06,870 --> 00:06:13,360
so that if you do make errors it's easier to trace back the changes you have made.

67
00:06:13,580 --> 00:06:15,490
Thank you so much for your time.

68
00:06:15,500 --> 00:06:17,580
Take care and bye for now.